<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程之基础入门</title>
    <style>
        .aa{
            width: 200px;
            height: 200px;
            border: 10px red solid;
        }

        .bb{
            width: 200px;
            height: 200px;
            border: 10px salmon dashed;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>

    <!--
            v-bind: 绑定  作用: 将html标签某个属性绑定给vue实例进行管理
            简化写法  :   语法:    :属性名="属性值"   推荐
    -->

    <div v-bind:class="cls" @mouseover="cls='bb'" @mouseout="cls='aa'"></div>

    <br>

    <!--简化后的写法，只需要带上冒号即可，不需要写v-bind-->
    <div :class="cls" @mouseover="cls='bb'" @mouseout="cls='aa'"></div>

</div>
</body>
</html>
<!--引入vue.js核心文件-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//代表vue实例作用范围
        data:{    //用来vue实例绑定数据
            msg:"hello vue",
            cls: "aa"
        },
        methods: { //用来给vue实例定义一些列的相关方法

        }
    });
</script>



